<template>
    <div>
        <!-- 资讯详情页 -->
        <div class="top">
            <span @click="fun()">&lt;</span>
            <p>{{context.title|textstr}}</p>
        </div>
        <h5>{{context.title}}</h5>
        <div class="others">
            <p>{{context.source}}</p>
            <p class="time">{{context.time|timestr}}</p>
        </div>
        <img src="/news/nav.jpg" class="topimg">
        <p v-html="context.context" class="context"></p>
        <footer>
            <p>来源：中国邮政集团有限公司邮政业务部</p>
            <hr>
            <p>编辑：朱亚强</p>
            <p>校对：朱亚强</p>
            <img src="/news/infob.jpg">
        </footer>
    </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.go(-1)
        }
    },
    filters:{
        textstr(data){
            if(data.length>13){
                return data.substr(0,13)+"..."
            }else{
                return data
            }
        },
        timestr(data){
            return data.substr(5,10)
        }
    },
    data(){
        return{
            contextid:this.$route.query.id,
            contexts:this.$store.state.news.text,
            context:''
        }
    },
    created(){
       for(let i=0;i<this.contexts.length;i++){
        //    console.log(this.contexts[i].id)
           if(this.contexts[i].id==this.contextid){
               this.context=this.contexts[i]
           }
       }
    }
}
</script>

<style scoped>
h5{
    font-size:0.2rem;
    text-align: center;
    margin: auto;
    margin-top:0.34rem;
    width:3.3rem;
}
.top{
    display: flex;
    position: fixed;
    top:0;
    z-index: 999;;
    background-color: #fff;
    height:0.28rem;
}
.top span{
    font-size:0.28rem;
    line-height: 0.28rem;
    transform: translateY(-0.02rem);
}
.top p{
    width:3.3rem;
    font-size:0.18rem;
    line-height: 0.28rem;
    text-align: center;
}
.others{
    font-size:0.14rem;
    display: flex;
    line-height: 0.34rem;
    margin-left:0.15rem
}
.time{
    color:gray;
    margin-left:0.1rem
}
.topimg{
    width:3.3rem;
    height:0.6rem;
    display: block;
    margin: auto;
    margin-bottom:0.2rem
}
.context{
    font-size:0.14rem;
    width:3.3rem;
    margin: auto;
}
footer{
    width:3.3rem;
    margin:auto;
    margin-top:0.2rem;
}
footer p{
    font-size:0.12rem;
    color:gray;
    line-height: 0.26rem;
}
footer img{
    width:3.3rem;
    height:2rem;
    display: block;
}
</style>